<template>
	<view v-if="detail">
    <t-header @back="clickNavBackFn">历史持仓详情</t-header>
		
		<tui-list-cell>
			<view class="flex justify-between align-center">
				<view class="text-gray">股票</view>
				<view class="flex align-center margin-top-xs">
					<image class="tag" :src="`/static/images/icons/${detail.marketCode}.png`" mode=""></image>
					<text class="text-sm">{{detail.code}}</text>
				</view>
			</view>
		</tui-list-cell>
		<tui-list-cell>
			<view class="flex justify-between align-center">
				<view class="text-gray">买入手数</view>
				<view>
					{{detail.canBuy}}
				</view>
			</view>
		</tui-list-cell>
		<tui-list-cell>
			<view class="flex justify-between align-center">
				<view class="text-gray">买入数量(股)</view>
				<view>
					{{detail.number}}
				</view>
			</view>
		</tui-list-cell>
		<tui-list-cell>
			<view class="flex justify-between align-center">
				<view class="text-gray">买入价格</view>
				<view>
					{{detail.buyprice}}
				</view>
			</view>
		</tui-list-cell>
		<tui-list-cell>
			<view class="flex justify-between align-center">
				<view class="text-gray">本金</view>
				<view>
					{{detail.money}}
				</view>
			</view>
		</tui-list-cell>
		<tui-list-cell>
			<view class="flex justify-between align-center">
				<view class="text-gray">买入手续费</view>
				<view>
					{{detail.allMoney}}
				</view>
			</view>
		</tui-list-cell>
		
		<tui-list-cell>
			<view class="flex justify-between align-center">
				<view class="text-gray">平仓手续费</view>
				<view>
					{{detail.sxfee}}
				</view>
			</view>
		</tui-list-cell>
		
		<tui-list-cell>
			<view class="flex justify-between align-center">
				<view class="text-gray">印花税</view>
				<view>
					{{detail.yhfee}}
				</view>
			</view>
		</tui-list-cell>
		
		<tui-list-cell>
			<view class="flex justify-between align-center">
				<view class="text-gray">买入时间</view>
				<view>
					{{detail.createtime_name}}
				</view>
			</view>
		</tui-list-cell>
		<tui-list-cell>
			<view class="flex justify-between align-center">
				<view class="text-gray">卖出类型</view>
				<view>
					平仓
				</view>
			</view>
		</tui-list-cell>
		
		<tui-list-cell>
			<view class="flex justify-between align-center">
				<view class="text-gray">卖出价格</view>
				<view>
					{{detail.sellprice}}
				</view>
			</view>
		</tui-list-cell>
		<tui-list-cell>
			<view class="flex justify-between align-center">
				<view class="text-gray">盈亏</view>
				<view :class="detail.profitLose>0?'text-red':'text-green'">
					{{detail.profitLose}}
				</view>
			</view>
		</tui-list-cell>
		<tui-list-cell>
			<view class="flex justify-between align-center">
				<view class="text-gray">卖出时间</view>
				<view>
					{{detail.outtime_name}}
				</view>
			</view>
		</tui-list-cell>
		
		<view class="padding">
			<tui-button type="theme" @click="clickNavBackFn">返回</tui-button>
		</view>
	</view>
</template>

<script setup>
import {ref} from 'vue';
import {onLoad} from '@dcloudio/uni-app';

import THeader from '@/components/views/t-header/index.vue'; // 头部组件

const detail = ref(null);

onLoad((options) => {
	detail.value = JSON.parse(options.data);
});

// 点击返回
const clickNavBackFn = () => {
	const pages = getCurrentPages();
	if (pages.length >= 2) {
		uni.navigateBack();
	} else {
		uni.switchTab({
			url: '/pages/my/index'
		});
	}
};
</script>

<style lang="scss" scoped>
.tag{
	width: 36rpx;
	height: 24rpx;
	margin-right: 10rpx;
}
</style>